<template>
    <div class="chat full_page">
        <Edit :userName="userName" :userId="userId" @sendTxt="sendTxt" @focus="focus"></Edit>
        <div class="scroll-list-wrap">
            <cube-scroll ref="scroll">
                <Msgs @scrollToEnd="scrollToEnd" :msgs="msgs"></Msgs>
            </cube-scroll>

        </div>
            <transition name="cover">
                <router-view/>
            </transition>
        </div>

</template>

<script>
    import {mapState, mapActions, mapMutations} from 'vuex'
    import ChatUtil from '../../yf/im/chat'
    import {joinGroup} from "../../api/group";
    import Edit from './edit'
    import Msgs from './msgs'

    export default {
        name: "index",
        components: {Msgs, Edit},
        created() {
            let groupId = 33 //TODO 实际情况中是从其它页面传递
            joinGroup(groupId).then((res) => {
                ChatUtil.initGroupChat(groupId)
            }).catch(error => {
                alert("进入群聊失败!")
            })

        },
        mounted() {

        },
        data() {
            return {
                txt: '',
                toId: ''
            }
        },
        updated() {
           this.$nextTick(function () {
               this.scrollToEnd()
           })

        },
        methods: {
            sendTxt(txt) {
                ChatUtil.sendTextMsg(txt)
            },
            focus() {
                //聚焦 强制下滑
                this.scrollToEnd(true)
            },
            scrollToEnd(force) {
                //当已经滑动到最底部 或者强制到最底部  就进行滑动 避免收到消息就滑动了 无法看历史消息
                if(force|| !this.lastSy|| this.lastSy>=this.$refs.scroll.scroll.y){
                    this.$refs.scroll.scrollTo(
                        0,
                        this.$refs.scroll.scroll.maxScrollY
                    )
                    this.lastSy = this.$refs.scroll.scroll.maxScrollY;
                }
            },
            ...mapActions([
                'outLogin'
            ]),
            ...mapMutations([
                'PUSH_MSG'
            ])
        },
        computed: {
            ...mapState({
                userName: state => state.user.userName,
                userId: state => state.user.userId,
                curMsgList: state => state.chat.curMsgList
            }),
            msgs() {//数据每次变动
                // this.$nextTick( ()=> {
                //      setTimeout(()=>{
                //
                //      },1)
                // })
                return this.curMsgList
            }
        }
    }
</script>

<style scoped lang="stylus">
    .scroll-list-wrap
        position absolute
        top 120px
        bottom 0
        overflow hidden
</style>